<template>
    <div id="system-config">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="区域配置" name="Area">
               <AreaConfig v-if="activeName==='Area'"
                           :configtype="activeName"
               ></AreaConfig>
            </el-tab-pane>
            <el-tab-pane label="环线位置" name="LoopLine">
                <LoopLineConfig  v-if="activeName==='LoopLine'"
                                 :configtype="activeName"
            ></LoopLineConfig>
            </el-tab-pane>
            <el-tab-pane label="轨道交通" name="Traffic1">
                <AreaConfig v-if="activeName==='Traffic1'"
                            :configtype="activeName"
                ></AreaConfig></el-tab-pane>
            <el-tab-pane label="BRT交通" name="TrafficBrt">  <AreaConfig v-if="activeName==='TrafficBrt'"
                                                                     :configtype="activeName"
            ></AreaConfig></el-tab-pane>
            <el-tab-pane label="建筑类别" name="Building"><BuldPage  v-if="activeName==='Building'"
                                                                 :configtype="activeName"
            ></BuldPage></el-tab-pane>
            <el-tab-pane label="特色标签" name="Property"> <SysPropertyPage v-if="activeName==='Property'"
                                                                      :configtype="activeName"
            ></SysPropertyPage></el-tab-pane>
            <el-tab-pane label="资讯栏目" name="Consulting"> <SysCulPage v-if="activeName==='Consulting'"
                                                                      :configtype="activeName"
            ></SysCulPage></el-tab-pane>
        </el-tabs>

    </div>

</template>
<script>
    /*添加弹框引入*/
    import AreaConfig  from './SysAreaConfigPage'
    import SysPropertyPage  from './SysPropertyConfigPage'
    import LoopLineConfig  from './SysLoopLinePage'
    import BuldPage  from './SysBuldPage'
    import SysCulPage  from './SysCulPage'

    export default {
        name: "SystemConfig",
        components:{
            AreaConfig,
            SysPropertyPage,
            LoopLineConfig,
            BuldPage,
            SysCulPage
        },
        data() {
            return {

                /*标签*/
                activeName: 'Area',
               /* inputVisible: false,
                inputValue: '',*/

            };
        },
        methods: {
            handleClick(row) {
               /* console.log(row);*/
            },


        },



    }
</script>

<style lang="less">
    .clear::after{
        content:'';
        display: block;
        clear: both;
    }
    #system-config{
        .total-size{
            position: absolute;
            bottom:50px;
            left:40px;
            color:gray;
            font-size: 14px;
            span{
                font-size: 16px;
                color: #ff9d2b;
                margin: 0 8px;
            }
        }
        .el-pager li.active{
            color:#ffaa00;
        }
        .el-pager li:hover,.el-pagination button:hover{
            color:#ffaa00;
        }
        .el-tabs__nav-wrap::after{
            background-color: rgba(255, 255, 255, 0);
        }
        .el-tabs__item.is-active{
            color: #ffaa00;
        }.el-tabs__active-bar{
        background-color: #ffaa00;
                 }
        .el-tabs__item:hover{
            color: #ffaa00;
        }
        .sys-content-head{
            margin: 20px 0;
        }

        .add-btn{
            outline: none;
            border: none;
            background-color: #ffaa00;
            color: white;
            font-size: 16px;
            padding: 10px 20px;

            cursor: pointer;
            border-radius: 4px;
            transition: all .2s;
            &:hover{
                background-color: #ff9d2b;
            }
        }
        .el-tag {
            margin:5px 10px;
        }
        .del-tag{
            padding: 0 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
        .color-item{
            color: chocolate;
        }

        //draw
        .config-draw{
            h2{
                font-size: 1.6rem;
                font-weight: 400;
                padding: 2rem;

                .selectTabeleTips {
                    font-size: 12px;
                    line-height: 16px;
                    font-weight: initial;
                    color: #aaaaaa;
                }

                >span{
                    font-size: 2rem;
                    font-weight: bold;

                    color: #ff9d2b;
                }
                .el-button{
                    float: right ;
                    color: #ffffff;
                }
            }
            .content-form {
                padding: 0 2rem 2rem;
                min-width: 800px;
            }
            .demo-drawer__footer{
                padding: 20px 100px;

                .el-button:nth-of-type(1){
                    float: left;

                }
                .el-button:nth-of-type(2){
                    float: right;
                }
            }
            .area-title{
                position: relative;
                margin: 10px 0;
                padding-left:20% ;
                width: 80%;
                height: 40px;
                line-height: 40px;
                .el-icon-plus{
                    border: none;
                    display: inline-block;
                    border-radius: 4px;
                    height: 40px;
                    line-height: 40px;
                    padding: 0 20px;
                    color: white;
                    cursor: pointer;
                    margin-left: 4%;
                    background-color: #ff9d2b;

                }
                label{
                    font-size: 18px;
                    position: absolute;
                    top:0;
                    left: 0;
                    background-color: #ff9d2b;
                    width: 12%;
                    height: 100%;
                    text-align: center;
                    color: white;
                    border-radius: 4px;
                }
                .li-title{
                    display: inline-block;
                    text-align: center;
                }
                .li-title:nth-of-type(1){
                    width: 50%;
                }
                .li-title:nth-of-type(2){
                    width: 20%;
                }
                .li-title{
                    display: inline-block;
                    text-align: center;
                }
                .moreaddinput{
                    //限制最高宽度。
                    position: absolute;
                    right: 0;
                    top:0;
                    display: inline-block;
                    margin-left: 20px;
                    width: 300px;
                    max-height:60px ;
                    outline: none;
                    resize: none;
                }
            }
            .area-1{

                padding-left:8% ;
                width: 30%;
                input:nth-of-type(1){
                    width: 50%;

                }
                .property-table input{
                    width: 100%;
                }
                input:nth-of-type(2){
                    width: 20%;

                }
            }

            .area-2{
                padding-left:8% ;


                ul{
                    padding:0;
                    margin: 0;
                }
                li{
                    list-style: none;float: left;
                    width: 30%;
                    height: 40px;
                    padding: 0;
                    margin: 10px 5px;
                    /*  input:nth-of-type(1){
                          width: 50%;
                      }*/
                    input:nth-of-type(2){
                        width: 20%;
                    }
                    .el-icon-delete{
                        cursor: pointer;
                    }
                    &.del-input-item{

                        input{
                            background-color: #cdd0da;
                        }
                    }
                    &.canceldel-input-item{
                        input{
                            background-color: #ffffff;
                        }
                    }
                    .el-icon-refresh-right{
                        cursor: pointer;
                    }
                }

            }
            .area-2,.area-1{
                .iswarninput{
                    border: 1px solid red;
                }
                input{
                    outline: none;
                    box-sizing: border-box;
                    border: 1px solid #b6b6b6;
                    height: 40px;
                    line-height: 40px;
                }
                input:nth-of-type(1){
                    padding:4px 8px;
                }
                input:nth-of-type(2){
                    padding:4px 8px;
                    margin: 0 8px;
                }
            }
        }
        .el-drawer__body {
            /*  overflow: auto;*/
            overflow-y: auto;
        }

        /*2.隐藏滚动条，太丑了*/
        .el-drawer__container ::-webkit-scrollbar{
            display: none;
        }
        .clear::after{
            content: '';
            display: block;
            clear:both ;
        }

        .el-drawer{
            outline: none;
        }

    }

</style>